<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>
<body>
    <div id="app">
        
        <p v-if="age===18">刚好遇见你</p>
        <p v-else-if="age===28">如果早些遇见你了</p>
        <p v-else>我只想遇见你</p>
        <template v-if="type==='name'">
            <label>
                用户名：
            </label>
            <input placeholder="输入用户名" key="name">

        </template>
        <template v-else>
            <label>
                邮箱：
            </label>
            <input placeholder="请输入邮箱" key="mail">
        </template>
        <button @click="Change">切换输入类型</button>
        <!-- {{otherMsg()}}
        <div v-model="ht">
            <img :src="imgSrc" alt="">
            <a :href="url">汶霖一下，你就知道</a>
            <button @click="handleClick">这是一个按钮</button>
        </div> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                type:'name',
                age:18
                // msg:'天蓝蓝',
                // ht:"<h1>蓝**可能不是人，但是你是真的*</h1>",
                // imgSrc:"./imgs/u=1050705252,2505252489&fm=26&gp=0.jpg",
                // url:"http://baidu.com"
                // isActive:true,
                // isError:false,
                // colorCls:'forecolor'
            },
            computed:{
                newMsg:function(){
                   return this.msg+"秋水共长天一色，落霞与孤鹜齐飞"
                },
                bgcolorCls:function(){
                    return this.isActive?'bgcolor':''
                },
                clsProp:function(){
                    return{
                        bgcolor:this.isActive,
                        forecolor:this.isError
                    }
                }
            }
            ,
            filters:{
                formatString:function(val){
                    return val+"  水流花落叹浮生";
                }
            }
            ,
            methods:{
                handleClick:function(){
                    console.log("美好青春你值得拥有");
                },
                otherMsg:function(){
                    return this.msg+"夕阳无限好，只是近黄昏"
                },
                Change:function(){
                    return this.type = this.type === 'name' ? 'mail':'name'
                }
            }
            ,
            mounted:function(){
                console.log('挥一挥衣袖不带走一片云彩'+new Date().toLocaleString());
                
            },
            created:function(){
                console.log('他轻轻的来了，又轻轻地走了'+new Date().toLocaleString());
            }
        })
    </script>
</body>
</html>